<template>
  <view class="like">
    <cu-custom bgColor="bg-gradual-green" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="content">我的消息</block>
    </cu-custom>
    <view class="cu-load load-modal" v-if="loadModal">
      <!-- <view class="cuIcon-emojifill text-orange"></view> -->
      <image :src="imgUrl+'static/loading.gif'" mode="aspectFit"></image>
      <view class="gray-text">{{hint}}</view>
    </view>
    <scroll-view scroll-x class="bg-white nav">
      <view class='flex text-center'>
        <view class="cu-item flex-sub" :class="0==TabCur?'text-orange cur':''" @click='tabselect' data-id="0">
          点赞
        </view>
        <view class="cu-item flex-sub" :class="1==TabCur?'text-orange cur':''" @click='tabselect' data-id="1">
          回复
        </view>
      </view>
    </scroll-view>
    <view class="cu-bar bg-white solid-bottom">
      <view class='action'>
        <text class='icon-titles text-orange'></text>
        <view class="cu-capsule radius">
          <view class='cu-tag bg-red' v-if='TabCur==1'>收到的回复</view>
          <block v-else>
            <view class='cu-tag bg-red'>收到的赞</view>
          </block>
        </view>
      </view>
    </view>
    <view class="cu-list menu-avatar message">
      <block v-if="flashData.length>0">
        <view class="cu-item " v-for="(item,index) in flashData" :key="index" @click="toRead" data-url="../home/read" :data-id="item.article.article_id" :data-visit="item._id">
          <view class="cu-avatar round lg" :style="'background-image:url('+item.user.user_cover+');'"></view>
          <view class="content">
            <view class="text-grey" v-if='TabCur==1'>{{item.user.user_name}} 回复了您的评论</view>
            <block v-else>
              <view class="text-grey">{{item.user.user_name}} 点赞了您的评论</view>
            </block>
            <view class="text-gray text-sm text-cut">
              <text class="cuIcon-comment text-purple"></text>
              {{!!item.reply_body?item.reply_body:item.article.article_title}}</view>
          </view>
          <view class="action">
            <view class="cu-tag round bg-red sm" v-if='item.visit'>
            </view>
            <view class="text-grey text-xs">{{item.reply_time}}</view>
          </view>
        </view>
      </block>
      <view class="noData" v-else>
        <image :src="imgUrl+'static/noNews.jpg'"  class="noImg" mode="aspectFit"></image>
        <text class="noTitle">暂无数据</text>
      </view>
    </view>
  </view>
</template>

<script>
  import util from '../../utils/time.js';
  export default {
    data() {
      return {
        imgUrl:getApp().globalData.imgUrl,
				isReply: getApp().globalData.isReply,
        loadModal: false, //加载
        pageInex: 1, //第一页
        pageSize: 10, //每页条数
        hint: '加载中...',
        user_id: null,
        TabCur: 0,
        flashData: {}
      }
    },
    onLoad: function(option) {
      let userInfo =getApp().globalData.userInfo;
      if (Object.keys(userInfo).length>0) {
        this.user_id = userInfo.user_id;
        this.getFlash()
      } else {
        uni.navigateTo({
          url: '../login/login',
        })
      }
    },
    methods: {
      tabselect(e) {
        let id = e.currentTarget.dataset.id;
				if(!this.isReply&&id==1){
					uni.showToast({
						title: "等待更新....",
						duration: 2000
					});
					return;
				}
        if (this.TabCur != id) {
          this.TabCur = id;
          this.getFlash();
        }
      },
      toRead(e) {
        let {
          id,
          url,
					visit
        } = e.currentTarget.dataset;
				this.visitRead(visit);
        uni.navigateTo({
          url: `${url}?id=${id}`
        })
      },
			visitRead(id){
				wx.cloud.callFunction({
				  name: 'visitRead',
				  data: {
				    id: id,
						tabCur: this.TabCur,
				  },
				  success: res => {
				    if(res.result.errMsg=="collection.update:ok"){
							for(let i=0;i<this.flashData.length;i++){
								if(this.flashData[i]._id==id){
									this.flashData[i].visit=false
								}
							}
						}
				  },
				  fail: err => {
				    console.error('[云函数] [visitRead] 调用失败', err)
				  },
				})
			},
      getFlash(refresh = '') {
        this.hint = refresh == 'below' ? '刷新中...' : '加载中...';
        this.loadModal = true;
        if (refresh == 'below') {
          this.flashData = {};
        } //清空列表
        wx.cloud.callFunction({
          name: 'getFlash',
          data: {
            tabCur: this.TabCur,
            user_id: this.user_id,
            pageInex: this.pageInex,
            pageSize: this.pageSize
          },
          success: res => {
            this.loadModal = false;
            uni.stopPullDownRefresh();

            let flashData = res.result;
            flashData.map(item => {
              item.reply_time = util(parseInt(item.reply_time));
            })
            this.flashData = this.pageInex == 1 ? flashData : [...this.flashData, ...flashData];
						if (flashData.length == 0) {
						  uni.showToast({
						    title: '没有更多数据了！',
						    icon: 'none',
						    duration: 2000
						  })
						}
            // console.log(res)
          },
          fail: err => {
            console.error('[云函数] [getFlash] 调用失败', err)
          }
        })
      }
    },
    onPullDownRefresh() { //下拉刷新
      this.pageInex = 1;
      this.getFlash('below');
      // console.log('onPullDownRefresh');
    },
    onReachBottom() { //上拉加载
      this.pageInex = this.pageInex + 1;
      this.getFlash('up');
      // console.log('onReachBottom');
    },
  }
</script>

<style>
  page{
    background: #fff;
  }
</style>
